<template>
  <div class="container-login clearfix">
    <div class="fl">
      <el-image fit="cover" :src="loginLogo"></el-image>
      <h1 class="title">门票后台管理系统</h1>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
            <div class="form-item-label">账号</div>
            <el-form-item prop="loginName">
              <el-input v-model.trim="dataForm.loginName" :placeholder="$t('login.username')">
              </el-input>
            </el-form-item>
            <div class="form-item-label">密码</div>
            <el-form-item prop="password">
              <el-input v-model.trim="dataForm.password" type="password" :placeholder="$t('login.password')">
              </el-input>
            </el-form-item>
            <div class="form-item-label">验证码</div>
            <el-form-item prop="captcha" class="login-captcha">
              <el-input v-model.trim="dataForm.captcha" :placeholder="$t('login.captcha')">
                <template slot="append">
                  <div class="login-captcha-wrapper"><img :src="captchaPath" @click="getCaptcha()">  </div>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dataFormSubmitHandle()" class="btn-login" :loading="loading">{{ $t('login.title') }}</el-button>
            </el-form-item>
          </el-form>
    </div>
    <div class="fr login-right"></div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import { messages } from '@/i18n'
import { getUUID } from '@/utils'
import logo from '@/assets/img/login_logo.png'
export default {
  data () {
    return {
      loginLogo: logo,
      i18nMessages: messages,
      captchaPath: '',
      loading: false,
      dataForm: {
        loginName: '',
        password: '',
        uuid: '',
        captcha: ''
      }
    }
  },
  computed: {
    dataRule () {
      return {
        loginName: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        captcha: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.getCaptcha()
  },
  methods: {
    // 获取验证码
    getCaptcha () {
      this.dataForm.uuid = getUUID()
      this.captchaPath = `${window.SITE_CONFIG.apiURL}/captcha?uuid=${
        this.dataForm.uuid
      }`
    },
    // 登录
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate(valid => {
          if (!valid) {
            return false
          }
          this.loading = true
          this.$http
            .post('/login', this.dataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                this.loading = false
                this.getCaptcha()
                return this.$message.error(res.msg)
              }
              Cookies.set('token', res.data.token)
              this.$message({
                message: '登录成功',
                type: 'success',
                duration: 500,
                onClose: () => {
                  const flag = localStorage.getItem('noHomeTip') || false
                  this.$router.replace({ name: 'home', params: { showModal: flag } })
                }
              })
            })
            .catch(() => {})
        })
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>
<style lang="scss" scoped>
.container-login {
  margin: calc(5%) auto;
  width: 68%;
  height: 50em;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0px 10px 36px 0px rgba(0, 0, 0, 0.11);
  border-radius: 40px;
  .fl {
    padding: 7.5em 107px;
    width: 50%;
    .title {
      margin-top: 27px;
      font-size: 3.5em;
      line-height: 84px;
    }
    .el-form {
      .form-item-label {
        color: #666666;
        font-size: 14px;
        margin-bottom: 3px;
        padding-left: 15px;
      }
      .el-input {
        .el-input__inner {
          height: 37px;
          line-height: 37px;
          -webkit-appearance: none;
          -moz-appearance: none;
          border-bottom: 2px solid #f1f1f1 !important;
          border-left: 0px solid transparent !important;
          border-right: 0px solid transparent !important;
          border-top: 0px solid transparent !important;
          background-color: #fff;
        }
      }
      .login-captcha {
        position: relative;
        .el-input-group__append {
          background-color: transparent;
          color: #909399;
          vertical-align: middle;
          display: table-cell;
          position: relative;
          border-bottom: 2px solid #f1f1f1 !important;
          border-left: 0px solid transparent !important;
          border-right: 0px solid transparent !important;
          border-top: 0px solid transparent !important;
          border-radius: 4px;
          padding: 0 20px;
          width: 1px;
          white-space: nowrap;
        }
        .login-captcha-wrapper {
          position: absolute;
          top: 0px;
          right: 0px;
          height: 38px;
            overflow: hidden;
          background-color: #fff;
          cursor: pointer;
        }
      }
      .btn-login {
        margin-top: 1em;
        background-color: #3753c6;
        width: 208px;
        height: 42px;
        border-radius: 6px;
      }
    }
  }
  .fr {
    width: 50%;
    height: 100%;
    overflow: hidden;
    background-image: url(~@/assets/img/login_bg_right.png);
    background-size: cover;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
  }
}
</style>
